<template>
    <div class="px-[100px]">
        <div>全部订单</div>
        <div v-if="orderList.length">
            <OrderItem
                v-for="item in orderList"
                :goods="item.goodsList"
                :orderNo="item.orderNo"
                :orderId="item.id"
                :logisticsStatus="item.logisticsStatus"
                :orderPrice="item.orderPrice"
                :orderStatus="item.orderStatus"
                :orderTime="item.orderTime"
                @cancel="handleCancel"
                @back="handleBack"
                @comment="handleComment"
                :storeName="item.storeName"
                :payStatus="item.payStatus"
                class="mb-4"
                @pay="handlePay"
            ></OrderItem>
        </div>
        <div v-else>
            <el-empty description="暂无数据" />
        </div>
        <CustomDialog v-model:show="commentDialog" title="商品评价" width="600px" hideFooter>
            <div class="flex mb-4" v-for="(item, index) in commentTarget.goodsList">
                <div class="flex flex-col items-center justify-end">
                    <el-image style="width: 100px; height: 100px" :src="item.goodsImg" fit="cover" />
                    <div>{{ item.goodsName }}</div>
                </div>
                <div class="flex flex-col flex-1 ml-8">
                    <div class="flex items-center justify-between">
                        <div>请输入评价内容</div>
                        <el-button type="primary" @click="handleCommentAdd(item.goodsId, index)">提交评价</el-button>
                    </div>
                    <div class="mt-4">
                        <div class="flex items-start">
                            <SingleUpload v-model:="commentImgs[index]"></SingleUpload>
                            <el-input
                                class="ml-4 custom-style"
                                type="textarea"
                                rows="4"
                                maxlength="30"
                                show-word-limit
                                v-model="commentContents[index]"
                                placeholder="请输入"
                            />
                        </div>
                    </div>
                </div>
            </div>
        </CustomDialog>
    </div>
</template>

<script setup lang="ts">
import OrderItem from '@/components/OrderItem.vue'
import { getOrderList, addCartOrder, payOrder, backOrder, cancelOrder } from '@/apis/order'
import { addComment } from '@/apis/goods'
import { computed, onMounted, reactive, ref } from 'vue'
import { ElMessage } from 'element-plus'
import { useRouter } from 'vue-router'
import CustomDialog from '@/components/CustomDialog.vue'
import GoodsItem from '@/components/GoodsItem.vue'
import SingleUpload from '@/components/SingleUpload.vue'
const router = useRouter()
const checkAll = ref(false)
const orderList = ref([])
const totalPrice = computed(() => {
    return orderList.value
        .filter((item) => item.checked)
        .map((item) => item.goodsPrice * item.goodsNum)
        .reduce((a, b) => a + b, 0)
})
const getList = async () => {
    const res = await getOrderList({
        pageNum: 1,
        pageSize: 1000
    })
    orderList.value = res.list.map((item) => {
        return {
            ...item,
            checked: false
        }
    })
}

const handlePay = async (val: string) => {
    await payOrder(val)
    ElMessage.success('支付成功')
    getList()
}

const handleCancel = async (val: string) => {
    await cancelOrder(val)
    ElMessage.success('取消成功')
    getList()
}
const handleBack = async (val: string) => {
    await backOrder(val)
    ElMessage.success('退货成功')
    getList()
}
onMounted(() => {
    getList()
})

const commentDialog = ref(false)
const commentTarget = ref()
const commentContents = reactive<Record<number, string>>({})
const commentImgs = reactive<Record<number, string>>({})
const handleComment = (orderId: string) => {
    commentTarget.value = orderList.value.find((item) => item.id === orderId)
    commentDialog.value = true
}
const handleCommentAdd = async (id, index) => {
    await addComment({
        goodsId: id,
        commentContent: commentContents[index],
        commentImg: commentImgs[index]
    })
    ElMessage.success('评价成功')
}
</script>

<style lang="scss" scoped>
.custom-style {
    :deep(.el-textarea__inner) {
        height: 106px;
    }
}
</style>
